<template>
    <div style="padding:15px">
        <el-steps :active="activeName" simple style="width:90%;margin:0 auto;">
            <el-step title="第一步：清单" icon="el-icon-edit"></el-step>
            <el-step title="第二步：打包并四性检测" icon="el-icon-upload"></el-step>
            <el-step title="第三步：移交登记单" icon="el-icon-picture"></el-step>
            <el-step title="第四步：完成" icon="el-icon-picture"></el-step>
        </el-steps>

        <div v-if="activeName == 1">
            <el-row ref="queryForm" style="width:80%;margin:20px auto">
                <el-col :span="24">
                    <el-row>
                        <el-col :span="24" class="transf-title">电子移交清单</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form ref="form">
                                <el-form-item label="门 类：" label-width="60px">
                                    <!-- <el-select v-model="queryParams.categoryId" placeholder="请选择门类"
                                        @change="changeSelectCategoryId" :disabled="loading">
                                        <el-option label="请选择" value=""></el-option>
                                        <el-option v-for="item in options" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select> -->
                                    <treeselect v-model="treeselectId" :disable-branch-nodes="true"
                                        :options="options" label placeholder="请选择门类" @select="changeSelectCategoryId"
                                        :normalizer="normalizerCategoryID" />
                                </el-form-item>
                            </el-form>

                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-row ref="refbut" style="width:80%;margin:0 auto">
                <el-col :span="20" class="df transf-title-row">

                    <p v-if="dept.deptName">移交单位：{{ dept.deptName }}</p>
                    <p>移交时间：{{ create_time }}</p>
                </el-col>
                <!-- <el-col :span="4"><right-toolbar :showSearch.sync="showSearch" :search="false"
                        @queryTable="getList"></right-toolbar></el-col> -->
            </el-row>

            <!-- :row-key="(row)=>{ return row.id} el-table多选checkbox实现可多页多选，翻页后勾选情况不清空-->
            <el-table style="width:80%;margin:10px auto 0" v-loading="loading" :data="overDaVolist"
                :height="tableHeight - 140" border @selection-change="handleSelectionChange">
                <!-- <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/> -->
                <el-table-column label="序号" sortable align="center" type="index" />
                <el-table-column label="题名" align="center" prop="title" :show-overflow-tooltip="true" />
                <el-table-column label="档号" align="center" prop="dh" :show-overflow-tooltip="true" />
                <el-table-column label="档案类型" align="center" prop="daType" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.daType == 0">件</span>
                        <span v-if='scope.row.daType == 1'>案卷</span>
                        <span v-if='scope.row.daType == 3'>项目</span>
                    </template>
                </el-table-column>
                <el-table-column label="门类名称" align="center" prop="categoryName" :show-overflow-tooltip="true" />
                <el-table-column label="文件数量" align="center" prop="fileCount" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="密级" align="center" prop="mj" width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.mj != ''">
                            <span v-for="(i, idx) in dict.type.MJ" :key="idx">
                                {{ scope.row.mj == i.value ? i.label : '' }}
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="保管期限" align="center" prop="bgqx" width="120">
                    <template slot-scope="scope">
                        <!--
                        <span v-if="scope.row.bgqx != 0 && scope.row.bgqx != null">{{ dict.type.BGQX[scope.row.bgqx].label
                        }}</span> -->
                        <div v-if="scope.row.bgqx != 0 && scope.row.bgqx != null">
                            <span v-for="(i, idx) in dict.type.BGQX" :key="idx">
                                {{ scope.row.bgqx == i.value ? i.label : '' }}
                            </span>
                        </div>
                    </template>

                </el-table-column>

                <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"
                    fixed="right">
                    <template slot-scope="scope" v-if="scope.row.userId !== 1">
                        <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>

            <pagination style="width:80%;margin:0 auto 40px" v-show="total > 0" :total="total"
                :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

            <div style="text-align: center; margin-top:20px">
                <el-button type="primary" @click="nextStepTap(0)">下一步</el-button>

            </div>
        </div>
        <div v-if="activeName == 2" :style="'height:' + tableHeight1 + 'px;overflow-y: auto;'">
            <div class="overall margin-tp">
                <!-- 步骤条盒子 -->
                <div class="steps-box">
                    <!-- 步骤条 -->
                    <div class="Article-steps" :class="stepList.length <= activeIndex ? 'step-over' : ''">
                        <!-- 步骤条背景进度条 -->
                        <div class="line">
                            <span class="plan"
                                :style="`width:${activeIndex * (100 / (stepList.length - 1)) - (100 / (stepList.length - 1) / 2)}%`"></span>
                        </div>
                        <!-- 每步部分 -->
                        <span class="step" v-for="(i, index) in stepList" :key="index"
                            :class="activeIndex == i.stepIndex || i.stepIndex <= activeIndex ? 'step-active' : ''">
                            <span class="step-num">
                                <span class="num">{{ i.title }}</span>
                            </span>



                            <!-- <p class="title">{{ i.title }}</p> -->
                        </span>
                    </div>
                    <!-- 步骤条对应内容 -->
                    <!-- <div class="Article-content"> -->
                    <!-- <div class="content" v-for="(i, index) in stepList" :key="index"
                                v-show="activeIndex == index + 1">
                                步骤{{ index + 1 }}内容</div> -->
                    <!-- </div> -->
                </div>

                <el-button type="primary" class="btn" @click="nextStep()" :disabled="isDisabled">检测</el-button>
            </div>

            <el-row style="width:60%;margin:0 auto">
                <el-col :span="24" :xs="24">
                    <h3>基本信息</h3>
                </el-col>
                <el-col :span="20" :xs="20">
                    <el-form ref="form" :model="formINFO" :inline="true" class="demo-form-inline">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="检测时长">
                                    <el-input style="width:300px" v-model="formINFO.jcsjStr"
                                        v-if="formINFO.jcsj != undefined && formINFO.jcsj != null && formINFO.jcsj != ''"
                                        readonly></el-input>
                                    <el-input style="width:300px" v-model="formINFO.jcsj" v-else disabled></el-input>
                                </el-form-item>
                                <el-form-item label="检测范围">
                                    <el-input style="width:300px" v-model="formINFO.jcfw"
                                        v-if="formINFO.jcfw != undefined && formINFO.jcfw != null && formINFO.jcfw != ''"
                                        readonly></el-input>
                                    <el-input style="width:300px" v-model="formINFO.jcfw" v-else disabled></el-input>
                                </el-form-item></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24"> <el-form-item label="检测总数">
                                    <el-input style="width:300px" v-model="formINFO.jczs"
                                        v-if="formINFO.jczs != undefined && formINFO.jczs != null && formINFO.jczs != ''"
                                        readonly></el-input>
                                    <el-input style="width:300px" v-model="formINFO.jczs" v-else disabled></el-input>
                                </el-form-item>
                                <el-form-item label="检测评价">
                                    <el-input style="width:300px" v-model="formINFO.jcpjStr"
                                        v-if="formINFO.jcpjStr != undefined && formINFO.jcpjStr != null && formINFO.jcpjStr != ''"
                                        readonly></el-input>
                                    <el-input style="width:300px" v-model="formINFO.jcpjStr" v-else disabled></el-input>
                                </el-form-item></el-col>
                        </el-row>
                    </el-form>
                </el-col>
                <el-col :span="24" :xs="24">
                    <h3>四性检测结果详情</h3>
                    <div style="height:800px; border:1px solid #eee;background-color: #F5F7FA"
                        v-if="dataList.length <= 0">
                        <el-empty description="还没有检测数据~" style="margin-top:20%"></el-empty>
                    </div>
                    <div v-else>
                        <sxjcComponent istype="2" ref="child" :form="dataList" :formINFO="formINFO"></sxjcComponent>
                    </div>

                </el-col>
            </el-row>
            <div style="text-align: center; margin-top:20px">
                <el-button type="danger" @click="prevStepTap(0)">上一步</el-button>
                <el-button type="primary" @click="nextStepTap(1)" v-if="isTmpe == 0">下一步</el-button>
            </div>
        </div>
        <div v-if="activeName == 3">
            <el-row class="margin-tp" :style="'height:' + tableHeight1 + 'px;overflow-y: auto;'">
                <!-- istype=1  添加登记单    istype=2 打印登记单 -->
                <transferComponent istype="1" ref="childComponent" :form="form"></transferComponent>
                <div style="text-align: center; margin-top:20px">
                    <el-button type="danger" @click="prevStepTap(1)">上一步</el-button>
                    <!-- 集中式档案室按钮 -->
                    <el-button type="primary" v-hasPermi="['archive:yijiaoDan:insertHandOverReceive']"
                        @click="onSubmit">下一步</el-button>

                    <!-- 集中式档案室单体按钮 -->
                    <el-button type="primary" v-hasPermi="['archive:yijiaoDanTi:insertHandOverReceive']"
                        @click="onSubmitdanTi">下一步</el-button>

                </div>
            </el-row>
        </div>

        <div v-if="activeName == 4" :style="'height:' + tableHeight1 + 'px'"
            style="display: flex;flex-direction: column;justify-content: center;">
            <p style="font-size:24px;text-align: center;margin-bottom:36px;font-weight: bold">登记检测已完成！</p>
            <!-- <el-button type="primary" size="medium " style="width:60px;width: 118px;display: block;margin: 0 auto;"
                @click="JumpTap">移交审批</el-button> -->
        </div>
        <el-dialog title="请选择检测方案" :visible.sync="dialogVisible" width="20%" :before-close="handlecloseDelDialog"
            :close-on-click-modal="false">
            <el-select v-model="sxjcType" placeholder="请选择" style="width:100%">
                <el-option v-for="item in sxjcList" :key="item.identification" :label="item.identification"
                    :value="item.identification">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleYes">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { selectHandOverDaVo, delHandOverDa, insertHandOverReceive, insertNewHandOverReceive, getFileSize, getFileCount, getdetectionSchemeList, detection, listinfo, categorylist, userMessage, selectDept, getAuthority } from '@/api/archive/archiveTransfer/archiveTransfer.js'

import { getNewtrees } from "@/api/archive/archivesCategory.js";
import { getInfo } from "@/api/login";
import estimateTableHeight from '@/mixins/estimateTableHeight';
import transferComponent from "@/views/archive/archiveTransfer/transferComponent.vue";//移交登记单， 登记和查看详情用
import sxjcComponent from "@/views/archive/archiveTransfer/sxjcComponent.vue";//移交四性检测详情， 打印用
import axios from "axios";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    mixins: [estimateTableHeight], // 混入方法
    archive_Dicts: ['MJ', 'BGQX'],
    components: {
        transferComponent,
        sxjcComponent,
        Treeselect
    },
    data() {
        return {
            userInfo: "", //用户信息
            isShow: "2",
            //门类ID
            categoryIds: [],
            //档案数据类型
            daType: [],
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            showSearch: true,
            activeName: 1,
            // 遮罩层
            loading: false,

            // 总条数
            total: 0,
            //检测信息
            formINFO: {},
            //检测信息
            tableData: [],
            configurationInfo: [],
            //移交单登记
            form: {
                "name": undefined,
                "description": undefined,
                "daCount": undefined,
                "capacity": undefined,
                "type": undefined,
                "carrier": undefined,
                "carrierCount": undefined,
                "nd": undefined,
                "dh": undefined,
                "appearance": undefined,
                "trueExplain": undefined,
                "integrityExplain": undefined,
                "usableExplain": undefined,
                "secureExplain": undefined,
                "writtenBy": undefined, //填报人
                "writtenTimeYear": undefined, //年
                "writtenTimeMouth": undefined, //月
                "writtenTimeData": undefined, //日
                "auditorBy": undefined, //审核人
                "auditorTimeYear": undefined, //年
                "auditorTimeMouth": undefined, //月
                "auditorTimeData": undefined, //日
                "unitBy": undefined, //单位
                "unitTimeYear": undefined, //年
                "unitTimeMouth": undefined, //月
                "unitTimeData": undefined, //日
                "illustrate": undefined,
                "yjUnit": undefined,
                "jsUnit": undefined
            },
            // 移交单列表
            overDaVolist: null,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                categoryId: undefined //门类ID
            },
            //当前位置
            activeIndex: 1,
            //步骤条步数
            stepList: [
                {
                    stepIndex: 1,
                    title: "开始"
                },
                {
                    stepIndex: 2,
                    title: "打包"
                },
                {
                    stepIndex: 3,
                    title: "四性检测"
                },
                {
                    stepIndex: 4,
                    title: "结束"
                }
            ],
            percentage: 0,
            dept: {
                deptName: ""
            }, //用户信息,用于显示移交单位时候用
            create_time: "",//当前时间
            tableHeight1: "",
            sxjcList: [],//四性检测方案列表数据
            sxjcType: undefined,
            dialogVisible: false, //检测方案弹窗
            isTmpe: undefined,//判断下一步是否显示
            isDisabled: false, //判断检测按钮是否禁用
            dataList: [],
            tableData: [],
            options: [],
            timeout: 5000,//30秒一次心跳
            timeoutObj: null,//心跳心跳倒计时
            serverTimeoutObj: null,//心跳倒计时
            timeoutnum: null,//断开 重连倒计时
            ws: null,
            treeselectId: null

        }
    },
    updated() {
        this.tableHeight1 = this.tableHeight + 130;
        // console.log(this.tableHeight, "ksfjkl")
    },
    created() {

        this.categorylistPOST();
        getInfo().then(res => {
            const date = new Date()
            const year = date.getFullYear()
            const month = ('0' + (date.getMonth() + 1)).slice(-2)
            const day = ('0' + date.getDate()).slice(-2)
            this.create_time = year + "-" + month + "-" + day;
            // this.dept = res.user.dept
            // this.dept = ""
            this.userInfo = res.user;
        })


    },
    methods: {

        // 只能选择数据下面有children 的数据，没有children的时候禁用
        normalizerCategoryID(node) {
            if (node.nodeType == 'fonds') {
                if (node.children == undefined || node.children == null || !node.children.length) {

                    node['isDisabled'] = true;
                }

            }
            if (node.children == null || node.children == undefined || !node.children.length) {
                delete node.children;
            }
            return node
        },
        userMessagePOST() {
            userMessage().then(res => {

                if (res.code == "200") {
                    var url = "ws://" + res.data.ip + "" + process.env.VUE_APP_BASE_API + "/archive/websocket/" + res.data.userId;
                    // var url = "ws://192.168.2.20" +process.env.VUE_APP_BASE_API+"/archive/websocket/" + "217499917244043264";

                    this.initWebSocket(url);
                }
            }).catch(res => {
                // this.$modal.msgSuccess("失败");
            })
        },

        initWebSocket(url) {
            var that = this;
            //判断当前浏览器是否支持WebSocket
            if ('WebSocket' in window) {
                this.ws = new WebSocket(url);
                //   console.log(this.ws,"wssssssssssssssss")
                //连接发生错误的回调方法
                this.ws.onerror = function () {
                    that.reconnect(url);
                    console.log("llws连接错误!");
                };
                //连接成功建立的回调方法
                this.ws.onopen = function (event) {
                    that.start();      //心跳检测重置
                    console.log("llws连接成功!" + new Date().toLocaleString(), that.ws);
                }
                //接收到消息的回调方法
                this.ws.onmessage = function (event) {
                    console.log("llws收到消息啦:" + event.data, "+ ", new Date().toLocaleString());
                    if (event.data == 'pong') {  //维持心跳
                        that.reset();
                    }
                    if (event.data == 'jccg') {
                        that.$modal.closeLoading();
                        clearTimeout(this.timeoutObj);
                        clearTimeout(this.serverTimeoutObj);
                        that.ws.close();
                    }

                }
                //连接关闭的回调方法
                this.ws.onclose = function (event) {
                    // that.reconnect(url);
                    console.log("llws连接关闭!" + new Date().toLocaleString(), event);
                }
            } else {
                // that.reconnect(url);
                alert('Not support websocket');
            }

        },



        reconnect(url) {
            var that = this;
            if (this.lockReconnect) return;
            this.lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            this.timeoutnum && clearTimeout(this.timeoutnum);
            this.timeoutnum = setTimeout(() => {
                //新连接
                this.userMessagePOST();
                this.lockReconnect = false;
            }, 500);
        },

        reset() { // 重置心跳
            // 清除时间
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            // 重启心跳
            this.start();
        },



        start() { // 开启心跳
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(() => {
                // 这里发送一个心跳，后端收到后，返回一个心跳消息，
                if (this.ws && this.ws.readyState == 1) { // 如果连接正常
                    this.ws.send("ping;" + this.userInfo.userId);
                } else { // 否则重连
                    //this.reconnect();
                }
                this.serverTimeoutObj = setTimeout(() => {
                    //超时关闭
                    this.ws.close();
                }, this.timeout);

            }, this.timeout)
        },




        //门类树
        categorylistPOST() {
            getNewtrees(this.$route.meta.menuId).then(response => {
                if (response.code === 200) {
                    this.options = response.data;
                }
            });

        },

        //门类下拉
        changeSelectCategoryId(val) {
            console.log(val, "sdlkfjkl")

            this.queryParams.categoryId = val.categoryId
            selectDept(val.categoryId).then(res => {
                // console.log(res,"dsklfjsdklfjklsdjfksdljfksdlj")
                this.dept.deptName = res.data.deptName
                this.getList()
                this.categoryIds = [];
            })
            // if (val.nodeType == 'cate') {
            //     this.queryParams.categoryId = val.id
            //     selectDept(val.id).then(res => {
            //         // console.log(res,"dsklfjsdklfjklsdjfksdljfksdlj")
            //         this.dept.deptName = res.data.deptName
            //         this.getList()
            //         this.categoryIds = [];
            //     })
            // } else {
            //     this.$message({ message: ' 请选择档案门类哦~', type: 'warning' })
            //     return false
            // }

        },

        //删除操作
        handleDelete(row) {
            this.$modal.confirm('是否确认删除所选数据项？').then(() => {
                delHandOverDa({
                    ids: row.id,
                }).then(res => {
                    this.$modal.msgSuccess("删除成功");
                    this.getList();
                })
            }).catch(() => { });
        },
        /** 查询移交单列表 */
        getList() {
            this.loading = true;
            selectHandOverDaVo(this.queryParams).then(response => {
                if (response.code == "200") {
                    this.overDaVolist = response.rows;
                    this.total = response.total;
                }
                this.loading = false;

            }
            ).catch(res => {
                this.loading = false;
            });
        },

        /**四性检测方案列表 */
        getdetectionSchemeListPOST() {
            getdetectionSchemeList({
                state: "1",
                phase: "1",
                categoryId: this.categoryIds[0],
            }).then(res => {
                if (res.rows.length > 0) {
                    this.sxjcList = res.rows
                    this.dialogVisible = true;
                    // this.formINFO = {};
                    this.tableData = [];
                    this.isDisabled = true;
                    // this.activeIndex = 1;

                } else {
                    this.$message({ message: '当前门类数据还没有四性检测方案数据', type: 'warning' })
                }
            })
        },
        //点击检测
        nextStep() {
            this.getdetectionSchemeListPOST();
        },
        handlecloseDelDialog() {
            // this.$modal.closeLoading();
            console.log("sdlkjfkl")
            // this.activeIndex = 1;
            this.isDisabled = false;
            this.dialogVisible = false;

        },
        //选择检测方案
        handleYes() {

            if (this.sxjcType == undefined) {
                this.$message({ message: '请选择方案', type: 'warning' })
                return false
            }
            this.activeIndex = 1;
            var dataArr = [{
                "categoryId": this.categoryIds[0],
                "link": "1",
                "code": this.sxjcType
            }];
            this.$modal.loading("正在检测中...");
            this.dialogVisible = false;
            var time = setInterval(() => {
                this.activeIndex++;
                if (this.activeIndex > 4) {
                    clearInterval(time)
                    this.userMessagePOST();
                    detection(dataArr).then(res => {
                        this.isDisabled = false;
                        if (res.code == "200") {
                            var jcpjArr = res.data.jcpj.split(",")
                            var tgx = ""

                            if (parseInt(jcpjArr[1] == '0' && jcpjArr[0]) == '0') {
                                tgx = "0.00%";
                            } else {

                                tgx = Math.round(((jcpjArr[0] - jcpjArr[1]) / jcpjArr[0]) * 100)
                            }

                            var num = parseInt(jcpjArr[0]) - parseInt(jcpjArr[1])
                            res.data.jcpjStr = "成功" + num + "个，失败" + jcpjArr[1] + "项,通过率" + tgx + "%";
                            res.data.jcsjStr = parseInt(res.data.jcsj) / 1000 + "s"

                            //  this.isTmpe = jcpjArr[1] <= '0' ? 'false' : 'true'; //判断是否有不通过检测，有的话不显示下一步

                            this.isTmpe = jcpjArr[1]

                            this.formINFO = res.data
                            listinfo({
                                pId: res.data.sxId
                            }).then(res => {
                                this.dataList = res.data

                            })
                            if (res.data.zsx != undefined || res.data.zsx != null) { //真实性
                                this.form['trueExplain'] = res.data.zsx > 0 ? "不通过" : "通过";
                            }
                            if (res.data.wzx != undefined || res.data.wzx != null) { //完整性
                                this.form['integrityExplain'] = res.data.wzx > 0 ? "不通过" : "通过";
                            }

                            if (res.data.kyx != undefined || res.data.kyx != null) { //可用性
                                this.form['usableExplain'] = res.data.kyx > 0 ? "不通过" : "通过";
                            }
                            if (res.data.aqx != undefined || res.data.aqx != null) { //安全性
                                this.form['secureExplain'] = res.data.aqx > 0 ? "不通过" : "通过";
                            }
                            this.form['yjUnit'] = this.dept.deptName;
                            this.$modal.closeLoading();

                        }
                    }).catch(res => {
                        this.isDisabled = false;
                        this.$modal.closeLoading();
                    })
                }
            }, 1000)
        },


        //移交单登记
        onSubmit() {

            // var form=this.$refs.childComponent.form //父页面调用子页面数据
            if (this.form.name == undefined) {
                this.$message({ message: '请输入交接工作名称', type: 'warning' })
                return false
            }
            if (this.form.description == undefined) {
                this.$message({ message: '请输入内容描述', type: 'warning' })
                return false
            }
            if (this.form.daCount == undefined) {
                this.$message({ message: '请输入移交电子档案件数', type: 'warning' })
                return false
            }
            if (this.form.capacity == undefined) {
                this.$message({ message: '请输入移交电子档案GB', type: 'warning' })
                return false
            }
            if (this.form.type == undefined) {
                this.$message({ message: '请选择移交方式', type: 'warning' })
                return false
            }
            if (this.form.type == "outLine") {
                if (this.form.carrier == undefined) {
                    this.$message({ message: '请输入载体类型', type: 'warning' })
                    return false
                }

                if (this.form.carrierCount == undefined) {
                    this.$message({ message: '请输入载体数量', type: 'warning' })
                    return false
                }
            }
            if (this.form.nd == undefined) {
                this.$message({ message: '请输入起止年度', type: 'warning' })
                return false
            }
            if (this.form.dh == undefined) {
                this.$message({ message: '请输入起止档号', type: 'warning' })
                return false
            }

            if (this.form.yjUnit == undefined) {
                this.$message({ message: '请输入移交单位', type: 'warning' })
                return false
            }
            // if (this.form.jsUnit == undefined) {
            //     this.$message({ message: '请输入接收单位', type: 'warning' })
            //     return false
            // }
            if (this.form.appearance == undefined) {
                this.$message({ message: '请输入载体外观', type: 'warning' })
                return false
            }
            if (this.form.trueExplain == undefined) {
                this.$message({ message: '请输入真实性', type: 'warning' })
                return false
            }

            if (this.form.integrityExplain == undefined) {
                this.$message({ message: '请输入完整性', type: 'warning' })
                return false
            }
            if (this.form.usableExplain == undefined) {
                this.$message({ message: '请输入可用性', type: 'warning' })
                return false
            }

            if (this.form.secureExplain == undefined) {
                this.$message({ message: '请输入安全性', type: 'warning' })
                return false
            }
            if (this.form.writtenBy == undefined) {
                this.$message({ message: '请输入填表人', type: 'warning' })
                return false
            }


            if (this.form.writtenTimeYear != undefined && this.form.writtenTimeMouth != undefined && this.form.writtenTimeData != undefined) {
                this.form.writtenTime = this.form.writtenTimeYear + "年" + this.form.writtenTimeMouth + "月" + this.form.writtenTimeData + "日";
            } else {
                this.$message({ message: '请输入填表人年月日哦', type: 'warning' })
                return false
            }
            if (this.form.auditorBy == undefined) {
                this.$message({ message: '请输入审核人', type: 'warning' })
                return false
            }


            if (this.form.auditorTimeYear != undefined && this.form.auditorTimeMouth != undefined && this.form.auditorTimeData != undefined) {
                this.form.auditorTime = this.form.auditorTimeYear + "年" + this.form.auditorTimeMouth + "月" + this.form.auditorTimeData + "日";
            } else {
                this.$message({ message: '请输入审核人年月日哦', type: 'warning' })
                return false
            }


            if (this.form.auditorBy == undefined) {
                this.$message({ message: '请输入单位', type: 'warning' })
                return false
            }

            if (this.form.unitTimeYear != undefined && this.form.unitTimeMouth != undefined && this.form.unitTimeData != undefined) {
                this.form.unitTime = this.form.unitTimeYear + "年" + this.form.unitTimeMouth + "月" + this.form.unitTimeData + "日";
            } else {
                this.$message({ message: '请输入单位年月日哦', type: 'warning' })
                return false
            }
            this.form.siXingId = this.formINFO.sxId
            this.form.id = this.formINFO.yijiaoId
            this.form.id = this.formINFO.yijiaoId
            this.form.categoryId = this.categoryIds[0];
            this.$modal.loading("加载中...")
            insertHandOverReceive(this.form).then(res => {
                // console.log(res)
                if (res.code == "200") {
                    this.activeName = 4
                    this.$modal.closeLoading();
                }
            }).catch(res => {
                this.$modal.closeLoading();
            })

        },
        onSubmitdanTi() {
            // var form=this.$refs.childComponent.form //父页面调用子页面数据
            if (this.form.name == undefined) {
                this.$message({ message: '请输入交接工作名称', type: 'warning' })
                return false
            }
            if (this.form.description == undefined) {
                this.$message({ message: '请输入内容描述', type: 'warning' })
                return false
            }
            if (this.form.daCount == undefined) {
                this.$message({ message: '请输入移交电子档案件数', type: 'warning' })
                return false
            }
            if (this.form.capacity == undefined) {
                this.$message({ message: '请输入移交电子档案GB', type: 'warning' })
                return false
            }
            if (this.form.type == undefined) {
                this.$message({ message: '请选择移交方式', type: 'warning' })
                return false
            }
            if (this.form.type == "outLine") {
                if (this.form.carrier == undefined) {
                    this.$message({ message: '请输入载体类型', type: 'warning' })
                    return false
                }

                if (this.form.carrierCount == undefined) {
                    this.$message({ message: '请输入载体数量', type: 'warning' })
                    return false
                }
            }
            if (this.form.nd == undefined) {
                this.$message({ message: '请输入起止年度', type: 'warning' })
                return false
            }
            if (this.form.dh == undefined) {
                this.$message({ message: '请输入起止档号', type: 'warning' })
                return false
            }

            if (this.form.yjUnit == undefined) {
                this.$message({ message: '请输入移交单位', type: 'warning' })
                return false
            }
            // if (this.form.jsUnit == undefined) {
            //     this.$message({ message: '请输入接收单位', type: 'warning' })
            //     return false
            // }
            if (this.form.appearance == undefined) {
                this.$message({ message: '请输入载体外观', type: 'warning' })
                return false
            }
            if (this.form.trueExplain == undefined) {
                this.$message({ message: '请输入真实性', type: 'warning' })
                return false
            }

            if (this.form.integrityExplain == undefined) {
                this.$message({ message: '请输入完整性', type: 'warning' })
                return false
            }
            if (this.form.usableExplain == undefined) {
                this.$message({ message: '请输入可用性', type: 'warning' })
                return false
            }

            if (this.form.secureExplain == undefined) {
                this.$message({ message: '请输入安全性', type: 'warning' })
                return false
            }
            if (this.form.writtenBy == undefined) {
                this.$message({ message: '请输入填表人', type: 'warning' })
                return false
            }


            if (this.form.writtenTimeYear != undefined && this.form.writtenTimeMouth != undefined && this.form.writtenTimeData != undefined) {
                this.form.writtenTime = this.form.writtenTimeYear + "年" + this.form.writtenTimeMouth + "月" + this.form.writtenTimeData + "日";
            } else {
                this.$message({ message: '请输入填表人年月日哦', type: 'warning' })
                return false
            }
            if (this.form.auditorBy == undefined) {
                this.$message({ message: '请输入审核人', type: 'warning' })
                return false
            }


            if (this.form.auditorTimeYear != undefined && this.form.auditorTimeMouth != undefined && this.form.auditorTimeData != undefined) {
                this.form.auditorTime = this.form.auditorTimeYear + "年" + this.form.auditorTimeMouth + "月" + this.form.auditorTimeData + "日";
            } else {
                this.$message({ message: '请输入审核人年月日哦', type: 'warning' })
                return false
            }


            if (this.form.auditorBy == undefined) {
                this.$message({ message: '请输入单位', type: 'warning' })
                return false
            }

            if (this.form.unitTimeYear != undefined && this.form.unitTimeMouth != undefined && this.form.unitTimeData != undefined) {
                this.form.unitTime = this.form.unitTimeYear + "年" + this.form.unitTimeMouth + "月" + this.form.unitTimeData + "日";
            } else {
                this.$message({ message: '请输入单位年月日哦', type: 'warning' })
                return false
            }
            this.form.siXingId = this.formINFO.sxId
            this.form.id = this.formINFO.yijiaoId
            this.form.id = this.formINFO.yijiaoId
            this.form.categoryId = this.categoryIds[0];
            this.$modal.loading("加载中...")
            //如果是在线移交
            if (this.form.type == 'onLine') {
                getAuthority().then(res => {
                    if (res.code == "200") {
                        if (!res.data) {                          //true 支持在线移交， 不支持在线是false
                            this.$modal.msgWarning("当前不支持在线移交，请修改为离线方式！")
                            this.$modal.closeLoading();
                            return
                        } else {
                            //在线接口
                            insertNewHandOverReceive(this.form).then(res => {
                                if (res.code == "200") {
                                    this.activeName = 4
                                    this.$modal.closeLoading();
                                }
                            }).catch(res => {
                                this.$modal.closeLoading();
                            })

                        }

                    }
                })

            } else {
                //离线接口
                insertNewHandOverReceive(this.form).then(res => {
                    if (res.code == "200") {
                        this.activeName = 4
                        this.$modal.closeLoading();
                    }
                }).catch(res => {
                    this.$modal.closeLoading();
                })
            }
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            console.log(selection, "+++++++++")
            this.ids = selection.map(item => item.daId)
            this.single = selection.length !== 1
            this.multiple = !selection.length;
            this.daType = selection.map(item => item.daType)
            this.categoryIds = selection.map(item => item.categoryId)
            this.selection = selection;
            // this.updateSelect(selectedRowKeys, selectedRows)

        },
        // 缓存已勾选的 selectedRows
        updateSelect(selectedRowKeys, selectedRows) {
            let keyLength = selectedRowKeys.length
            let rowLength = this.selectedRows.length
            if (keyLength > rowLength) {
                // 不添加重复项
                selectedRows.forEach((row) => {
                    let idx = this.selectedRows.findIndex((item) => item[this.rowKey] === row[this.rowKey])
                    if (idx === -1) {
                        this.selectedRows.push(row)
                    }
                })
            } else {
                // 剔除反选项
                this.selectedRows = this.selectedRows.reduce((list, row) => {
                    if (selectedRowKeys.includes(row[this.rowKey])) {
                        list.push(row)
                    }
                    return list
                }, [])
            }
            this.selectedRowKeys = [...new Set(selectedRowKeys)]
        },

        //下一步
        nextStepTap(val) {
            if (val == 0) {
                if (this.overDaVolist.length > 0) {
                    for (var i in this.overDaVolist) {
                        this.categoryIds.push(this.overDaVolist[i].categoryId)
                    }
                    var isTrue = true;//判断变量
                    var leng = this.categoryIds.length;
                    if (leng > 0) {
                        var temp = this.categoryIds[0];
                        for (var i = 0; i < leng; i++) {
                            if (this.categoryIds.indexOf(this.categoryIds[i]) != 0) {
                                isTrue = false;
                                break;
                            }
                        }
                    }
                    if (isTrue) {
                        this.activeName = 2

                        console.log("数组arr全部相同")
                    } else {
                        console.log("数组arr不相同")
                        this.$message({ message: '请选择相同门类进行检测哦！', type: 'warning' })
                        return
                    }
                } else {
                    this.$message({ message: '没有要检测的数据哦', type: 'warning' })
                    return;
                }
            } else if (val == 1) {
                this.activeName = 3
                //获取文件大小
                getFileSize({
                    categoryId: this.categoryIds[0]
                }).then(res => {

                    console.log(res.msg)
                    this.form.capacity = res.msg
                })
                //获取文件个数
                getFileCount({
                    categoryId: this.categoryIds[0]
                }).then(res => {
                    this.form.daCount = res.data;
                })
            }

        },
        //上一步
        prevStepTap(val) {
            this.multiple = true;
            this.sxjcList = [];
            this.sxjcType = undefined;
            if (val == 0) {

                this.activeIndex = 1;
                //检测信息
                this.formINFO = {};
                //检测信息
                this.tableData = [];
                this.dataList = [];
                this.activeName = 1;
                this.isTmpe = undefined;//判断下一步是否显示

            } else if (val == 1) {
                this.activeName = 2
            }
        },

        //移交审批跳转
        JumpTap() {

            console.log(this.form, this.form.type == "onLine")
            //在线onLine 离线outLine
            if (this.form.type == "onLine") {
                this.$router.push({ path: '/archiveTransfer/online' })
            } else {
                this.$router.push({ path: '/archiveTransfer/offline' })
            }
        },



    }
}
</script>

<style lang="scss" scoped>
.transf-title {
    text-align: center;
    line-height: 55px;
    font-weight: bold;
    font-size: 28px;
}

.df {
    display: flex;

}

.transf-title-row p {
    margin-right: 20px;
}

.steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

.steps-action {
    margin-top: 24px;
}


// __________________
.steps-box {
    user-select: none;
    width: 60%;
    // height: 400px;
    position: relative;
    margin: 0 auto;

    // <!-- 步骤条背景进度条 -->
    .line {
        display: block;
        margin: 0 auto;
        position: absolute;
        top: 50px;
        left: 5%;
        background: #ccc;
        width: 90%;
        height: 2px;
        overflow: hidden;

        .plan {
            position: absolute;
            top: 0;
            left: 0;
            height: 2px;
            transition: 0.5s;
            background: #8ab4f3;
        }
    }

    .Article-steps {
        display: flex;
        justify-content: space-between;

        .step:nth-child(2),
        .step:nth-child(5) {
            .step-num {
                width: 70px;
                height: 70px;
                display: inline-block;
                line-height: 70px;
                background: #c0c0c0;
                //  clip-path: polygon(50% 0, 100% 85%, 0 85%);
                clip-path: circle(30px at 50% 50%);
                // border-radius: 50%;
                color: white;
                font-weight: bold;
                transition: 0.5s;
                text-align: center;
                margin-top: 15px;

                .num {
                    transition: 0.5s;
                    display: block;
                }
            }
        }

        .step {
            .title {
                font-size: 17px;
                font-weight: bold;
                color: #808080;
                margin-top: 5px;
            }

            .step-num {
                width: 100px;
                height: 100px;
                display: inline-block;
                line-height: 100px;
                background: #c0c0c0;
                //  clip-path: polygon(50% 0, 100% 85%, 0 85%);
                clip-path: circle(50px at 50% 50%);
                // border-radius: 50%;
                color: white;
                font-weight: bold;
                transition: 0.5s;
                text-align: center;

                .num {
                    transition: 0.5s;
                    display: block;
                }
            }
        }
    }

    //当前所在位置样式
    .step-active {
        .step-num {
            background: #2d7df5 !important;
            transform: rotate(90deg);
            line-height: 100px;

            .num {
                transform: rotate(-90deg);
            }
        }

        .title {
            color: #2d7df5 !important;
        }
    }

    //全部完成样式
    .step-over {
        .plan {
            background: #91f062 !important;
        }

        .step-num {
            background: #67c23a !important;
        }

        .title {
            color: #67c23a !important;
        }
    }

    //对应内容
    .Article-content {
        padding: 20px;



        .content {
            padding: 20px;
        }
    }
}

.btn {
    width: 100px;
    display: block;
    height: 50px;
    margin-bottom: 10px;
    background: #2d7df5;
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 26px;
    right: 160px;
}

.overall {
    height: 110px;
    width: 100%;
    position: relative;
}

// end________________________________________________________
.margin-tp {
    margin-top: 20px;
}

.orderBorder {
    width: 46%;
    margin: 0px auto;
    ;
}

.orderBorder td {
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: rgb(42, 41, 41) 1px solid;
}

.transbz {
    width: 46%;
    margin: 0 auto;
}

::v-deep .orderBorder input {
    border: 0 !important;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
    -moz-appearance: textfield;
}

::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}






.pagination-container {
    background: #fff;
    padding: 32px 16px;
    overflow: hidden;
    height: 40px;
}

.pagination-container.hidden {
    display: none;
}

::v-deep .el-step.is-simple:not(:last-of-type) .el-step__title {
    max-width: 90% !important;
}
</style>
